<template>
  <el-form :model="tableForm" ref="formRef">
    <div style="margin-left: 10px">
      {{ tableForm.table[0].action }}
      <el-button type="primary" @click="validate">校验</el-button>
      <el-table :data="tableForm.table" border
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column type="index" label="序号" fixed width="50"></el-table-column>
        <el-table-column v-for="dataItem in model"
                         :label="dataItem.label"
                         :width="dataItem.width"
                         :key="dataItem.prop+dataItem.slot"
                         :prop="dataItem.prop">
          <template v-if="dataItem.slot" v-slot="scope">
            <el-form-item label-width="0"
                          :prop="`table.${scope.$index}.${dataItem.slot}`"
                          :rules="{required: true, message: '备件名称必需', trigger: 'change'}">
              <slot :name="dataItem.slot" v-bind="scope"></slot>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="80">
          <template v-slot="scope">
            <el-link type="danger" style="font-size: 18px" icon="el-icon-delete"
                     :disabled="tableForm.table.length<=1 "
                     @click="delList(scope.$index)"></el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-btn" @click="addList" style="margin-top: 5px"><i class="el-icon-plus"></i></div>
    </div>

  </el-form>
</template>

<script>
export default {
  name: "ProEditTable",
  props: {
    model: {
      type: Array,
      default: () => [{
        label: '测试',
        width: 200,
        prop: 'name',
      }, {
        label: '测试',
        width: 200,
        slot: 'action',
      }]
    },
    data: {
      type: Array,
      default: () => [{
        name: 'ceshi',
        action: 'nihao'
      }]
    }
  },

  data() {
    return {
      loading: false,
    }
  },
  computed: {
    tableForm: {
      set() {
        console.log(this.tableForm, 222)
      },
      get() {
        return {
          table: this.data
        }
      }
    },
    rowModel() {
      const newRow = {}
      this.model.forEach(item => {
        newRow[item.prop || item.slot] = null
      })
      return newRow
    }
  },
  watch: {
    'tableForm': {
      handler(current) {
        console.log(current, 111)
        this.$emit('update:data', current.table)
      },
      deep: true
    },
  },
  methods: {
    addList() {
      this.tableForm.table.push({...this.rowModel})
    },

    delList(index) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableForm.table.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    validate() {
      let flag = false
      this.$refs.formRef.validate(valid => flag = valid)
      return flag
    }

  }

}
</script>

<style scoped lang="scss">

.el-dialog:not(.ele-dialog-form) .el-dialog__body .el-form .el-form-item:last-child {
  margin-bottom: 0;
}

.add-btn {

  height: 57px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed var(--color-primary);
  //letter-spacing:1rem;
  i {
    font-size: 18px;
    color: var(--color-primary);
    font-weight: bolder;
  }

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }

  &:active {
    color: var(--color-primary-7);
    border-color: var(--color-primary-7);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }
}


</style>


